﻿<phone:PhoneApplicationPage
    x:Class="JumpingBalls.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:JumpingBalls.AppCode" 
    xmlns:ad="clr-namespace:Microsoft.Advertising.Mobile.UI;assembly=Microsoft.Advertising.Mobile.UI"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="800"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="False" Loaded="MainPage_Loaded">
    <phone:PhoneApplicationPage.Resources>
        <!--Converters -->
        <local:BallBrushConverter x:Key="BallBrushConverter" />
        <local:ScoreConverter x:Key="ScoreConverter" />
        <local:TopsScoreConverter x:Key="TopsScoreConverter" />
        <local:RankConverter x:Key="RankConverter" />
        <local:DateTimeConverter x:Key="DateTimeConverter" />

        <Style x:Key="NavButtonStyle" TargetType="Button">
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="BorderBrush" Value="{StaticResource PhoneForegroundBrush}"/>
            <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
            <Setter Property="BorderThickness" Value="{StaticResource PhoneBorderThickness}"/>
            <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiBold}"/>
            <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMediumLarge}"/>
            <Setter Property="Padding" Value="10,3,10,5"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid Background="Transparent">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="MouseOver"/>
                                    <VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneBackgroundBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <DoubleAnimation Duration="0" To="1.2" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)" Storyboard.TargetName="ButtonBackground" d:IsOptimized="True"/>
                                            <DoubleAnimation Duration="0" To="1.2" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)" Storyboard.TargetName="ButtonBackground" d:IsOptimized="True"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" CornerRadius="0" Margin="5,3,5,5" RenderTransformOrigin="0.5,0.5">
                                <Border.RenderTransform>
                                    <CompositeTransform/>
                                </Border.RenderTransform>
                                <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                            </Border>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="popButton" TargetType="Button">
        	<Setter Property="Template">
        		<Setter.Value>
        			<ControlTemplate TargetType="Button">
        				<Grid>
        					<VisualStateManager.VisualStateGroups>
        						<VisualStateGroup x:Name="CommonStates">
        							<VisualState x:Name="Disabled">
        								<Storyboard>
        									<ColorAnimation Duration="0" To="Silver" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="border" d:IsOptimized="True"/>
        								</Storyboard>
        							</VisualState>
        							<VisualState x:Name="Normal">
        								<Storyboard>
        									<ColorAnimation Duration="0" To="White" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="border" d:IsOptimized="True"/>
        								</Storyboard>
        							</VisualState>
        							<VisualState x:Name="MouseOver">
        								<Storyboard>
        									<ColorAnimation Duration="0" To="Silver" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="border" d:IsOptimized="True"/>
        								</Storyboard>
        							</VisualState>
        							<VisualState x:Name="Pressed">
        								<Storyboard>
        									<ColorAnimation Duration="0" To="Silver" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="border" d:IsOptimized="True"/>
        								</Storyboard>
        							</VisualState>
        						</VisualStateGroup>
        					</VisualStateManager.VisualStateGroups>
        					<Border x:Name="border" BorderBrush="#FF979797" BorderThickness="4" CornerRadius="10" Background="Black" />
        					<Rectangle/>
        					<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
        				</Grid>
        			</ControlTemplate>
        		</Setter.Value>
        	</Setter>
        </Style>
    </phone:PhoneApplicationPage.Resources>
    <!--LayoutRoot 是包含所有页面内容的根网格-->
    <Grid x:Name="LayoutRoot" Background="#FF2F2C4E">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="480"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

        <Grid Grid.Row="0">
            <StackPanel>
                <Border BorderThickness="3" BorderBrush="#FF4DD7E2" CornerRadius="10" Background="#FF08366A">
                    <StackPanel Orientation="Horizontal" Height="90" Margin="3">
                        <TextBlock Text="Score:" Margin="20,0,0,0" FontSize="50" VerticalAlignment="Center"/>
                        <TextBlock Text="{Binding Path=Score, Converter={StaticResource ScoreConverter}}" Margin="30,0,0,0" FontSize="60" VerticalAlignment="Center"/>
                    </StackPanel>
                </Border>
                <StackPanel Orientation="Horizontal"  Height="80">
                    <TextBlock Text="Next Balls"  Margin="20,0,0,0" FontSize="30" VerticalAlignment="Center"/>
                    <Ellipse Height="50" Width="50" Margin="30,0,0,0" VerticalAlignment="Center" Fill="{Binding Path=NextBall1, Converter={StaticResource BallBrushConverter}}" />
                    <Ellipse Height="50" Width="50" Margin="15,0,0,0" VerticalAlignment="Center" Fill="{Binding Path=NextBall2, Converter={StaticResource BallBrushConverter}}" />
                    <Ellipse Height="50" Width="50" Margin="15,0,0,0" VerticalAlignment="Center" Fill="{Binding Path=NextBall3, Converter={StaticResource BallBrushConverter}}" />
                </StackPanel>
            </StackPanel>
        </Grid>
        <Grid x:Name="gridGame" Grid.Row="1">
            <Border 
                BorderThickness="2"
                BorderBrush="Black"
                Background="Black" 
                HorizontalAlignment="Center" 
                VerticalAlignment="Center"
                IsHitTestVisible="{Binding Path=IsRuning}"
                >
                <Canvas x:Name="canvasBlocks" />
            </Border>
        </Grid>
        <Grid Grid.Row="2"  Margin="0,10,0,0">
            <Border BorderThickness="3" BorderBrush="#FFB069BC" Background="#FF660876" CornerRadius="10" >
                <Grid VerticalAlignment="Top" Grid.Row="1" Height="120">
                    <Button x:Name="btnStartGame" Click="btnStartGame_Click" Width="120" Height="100" HorizontalAlignment="Left" Style="{StaticResource NavButtonStyle}" Margin="10,0,0,0" VerticalAlignment="Center">
                        <Button.Background>
                            <ImageBrush ImageSource="/Images/GameStart.png"  Stretch="Uniform"/>
                        </Button.Background>
                    </Button>
                    <Button x:Name="btnViewTops" Click="btnViewTops_Click" Width="120" Height="100" HorizontalAlignment="Center" Style="{StaticResource NavButtonStyle}" Margin="20,0,0,0" VerticalAlignment="Center">
                        <Button.Background>
                            <ImageBrush ImageSource="/Images/GameTops.png" Stretch="Uniform" />
                        </Button.Background>
                    </Button>
                    <Button x:Name="btnVote" Click="btnVote_Click" Width="120" Height="100" HorizontalAlignment="Right" Style="{StaticResource NavButtonStyle}" Margin="0" VerticalAlignment="Center">
                        <Button.Background>
                            <ImageBrush ImageSource="/Images/Favorites.png"  Stretch="Uniform"/>
                        </Button.Background>
                    </Button>
                </Grid>
            </Border>
        </Grid>

        <Popup x:Name="popTops">
            <Grid Width="480" Height="800" Background="White" Opacity="0.9">
                <StackPanel Margin="20">
                    <TextBlock Text="Tops" Foreground="Black" FontSize="64" FontWeight="Bold" FontFamily="Segoe WP Black" Height="80" VerticalAlignment="Center" />
                    <StackPanel Orientation="Horizontal" Margin="1" >
                        <TextBlock Text="Rank" Width="65" Height="30" Margin="0" TextAlignment="Center" Foreground="Black" FontSize="24" VerticalAlignment="Center" FontWeight="Bold" HorizontalAlignment="Center"  />
                        <TextBlock Text="Score" Width="190" Height="30" TextAlignment="Center" Foreground="Black" FontSize="24" VerticalAlignment="Center" FontWeight="Bold" FontFamily="Segoe WP" HorizontalAlignment="Center"/>
                        <TextBlock Text="Create Date" Width="160" Height="30" TextAlignment="Center" Foreground="Black" FontSize="24" VerticalAlignment="Center" FontWeight="Bold" FontFamily="Segoe WP" HorizontalAlignment="Center"/>
                    </StackPanel>
                    <ListBox x:Name="listTops" Margin="0,10,0,20" Height="450">
                        <ListBox.RenderTransform>
                            <CompositeTransform/>
                        </ListBox.RenderTransform>
                        <ListBox.ItemTemplate>
                            <DataTemplate>
                                <StackPanel Orientation="Horizontal" Margin="1" Height="40" Background="#DDDDDD" >
                                    <TextBlock Text="{Binding Path=Rank, Converter={StaticResource RankConverter}}" Width="65" Height="30" TextAlignment="Center" Foreground="Black" FontSize="24" VerticalAlignment="Center" FontStyle="Italic" FontWeight="Bold"  />
                                    <TextBlock Text="{Binding Path=Score, Converter={StaticResource TopsScoreConverter}}" Width="190" Height="30" TextAlignment="Center" Foreground="Black" FontSize="24" VerticalAlignment="Center" FontWeight="Bold" FontFamily="Segoe WP"/>
                                    <TextBlock Text="{Binding Path=CreateDate, Converter={StaticResource DateTimeConverter}}" Width="160" Height="30" TextAlignment="Center" Foreground="Black" FontSize="24" VerticalAlignment="Center" FontWeight="Bold" FontFamily="Segoe WP"/>
                                </StackPanel>
                            </DataTemplate>
                        </ListBox.ItemTemplate>
                    </ListBox>
                    <ad:AdControl AdUnitId="93488" 
                              ApplicationId="7535ea63-07e5-4cbf-99b0-0fac96d450da" 
                              Height="80" Width="480" Margin="-10,0,-10,0" Background="DeepSkyBlue" />
                    <Button x:Name="btnPopBlack" Content="BACK TO GAME" Click="btnPopBlack_Click" Foreground="Black" Style="{StaticResource popButton}" Height="80" FontWeight="Bold" BorderThickness="3" FontSize="33.333"/>
                </StackPanel>
            </Grid>
        </Popup>
    </Grid>

    <!--演示 ApplicationBar 用法的示例代码-->
    <!--<phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="按钮 1"/>
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="按钮 2"/>
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem Text="菜单项 1"/>
                <shell:ApplicationBarMenuItem Text="菜单项 2"/>
            </shell:ApplicationBar.MenuItems>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>-->

</phone:PhoneApplicationPage>